<!DOCTYPE html>
<html>
<head>
<?php include_once VIEWS.'inc/head.php'; ?>
<?php
	echo static_file('web/css/swiper-3.3.1.min.css');
	echo static_file('web/js/swiper-3.3.1.min.js');;
	echo static_file('web/css/flexslider.css');
	echo static_file('web/js/jquery.flexslider-min.js');
	echo static_file('web/js/jquery.lazyload.min.js');
?>
<style>
	header{
		border-bottom:1px solid #e1e1e1;
	}
</style>
</head>

<body>
	<div class="main">
		<?php include_once VIEWS.'inc/header.php'; ?>
		<section class="hot">
			<div class="pro_list">
				<div class="text_box w1440">
					<div class="title wow fadeInUp">
						<div class="cn">集成热水机</div>
						<div class="en">Kitchen water purification</div>
					</div>
					<div class="ds wow fadeInUp" data-wow-delay="0.2s">我们用高科技、高品质、人性化的产品在满足您热水需求的同时，为您提供更加环保、智能、舒适的品位生活。</div>
					<a href="<?php echo site_url('hwliving/list'); ?>" class="more wow fadeInUp" data-wow-delay="0.4s">
						<span class="txt">了解产品</span>
						<img src="<?php echo static_file('web/img/hot_btnr.png')?>" alt="">
					</a>
				</div>

				<div class="flexslider wow fadeInUp">
					<ul class="slides">
						<li>
							<a href="<?php echo site_url('hwliving/list'); ?>">
								<img src="<?php echo static_file('web/img/hot_img.jpg')?>" >
							</a>
						</li>
						<li>
							<a href="<?php echo site_url('hwliving/list'); ?>">
								<img src="<?php echo static_file('web/img/hot_img.jpg')?>" >
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="pro_list">
				<div class="text_box w1440">
					<div class="title wow fadeInUp">
						<div class="cn">热水器</div>
						<div class="en">Water heater</div>
					</div>
					<div class="ds wow fadeInUp" data-wow-delay="0.2s">我们用高科技、高品质、人性化的产品在满足您热水需求的同时，为您提供更加环保、智能、舒适的品位生活。</div>
					<a href="<?php echo site_url('hwliving/list'); ?>" class="more wow fadeInUp" data-wow-delay="0.4s">
						<span class="txt">了解产品</span>
						<img src="<?php echo static_file('web/img/hot_btnr.png')?>" alt="">
					</a>
				</div>

				<div class="flexslider wow fadeInUp flexslider2">
					<ul class="slides">
						<li>
							<a href="<?php echo site_url('hwliving/list'); ?>">
								<img src="<?php echo static_file('web/img/hot_img2.jpg')?>" >
							</a>
						</li>
						<li>
							<a href="<?php echo site_url('hwliving/list'); ?>">
								<img src="<?php echo static_file('web/img/hot_img.jpg')?>" >
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="pro_list">
				<div class="text_box w1440">
					<div class="title wow fadeInUp">
						<div class="cn">集成热水（采暖）中心</div>
						<div class="en">Integrated hot water (heating) center</div>
					</div>
					<div class="ds wow fadeInUp" data-wow-delay="0.2s">我们用高科技、高品质、人性化的产品在满足您热水需求的同时，为您提供更加环保、智能、舒适的品位生活。</div>
					<a href="<?php echo site_url('hwliving/list'); ?>" class="more wow fadeInUp" data-wow-delay="0.4s">
						<span class="txt">了解产品</span>
						<img src="<?php echo static_file('web/img/hot_btnr.png')?>" alt="">
					</a>
				</div>

				<div class="flexslider wow fadeInUp flexslider2">
					<ul class="slides">
						<li>
							<a href="<?php echo site_url('hwliving/list'); ?>">
								<img src="<?php echo static_file('web/img/hot_img3.jpg')?>" >
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="pro_list fafafa">
				<div class="text_box w1440">
					<div class="title wow fadeInUp">
						<div class="cn">集成热水站</div>
						<div class="en">Integrated hot water station</div>
					</div>
					<div class="ds wow fadeInUp" data-wow-delay="0.2s">我们用高科技、高品质、人性化的产品在满足您热水需求的同时，为您提供更加环保、智能、舒适的品位生活。</div>
				</div>
				<div class="cont_box">
					内容暂时不明确！
				</div>
			</div>

			<div class="pro_list">
				<div class="text_box w1440">
					<div class="title wow fadeInUp">
						<div class="cn">集成热水解决方案</div>
						<div class="en">Integrated hot water solution</div>
					</div>
					<div class="ds wow fadeInUp" data-wow-delay="0.2s">	
						我们用高科技、高品质、人性化的产品在满足您热水需求的同时，为您提供更加环保、智能、舒适的品位生活。
					</div>
					<div class="solution_box fadeInUp wow" data-wow-delay="0.4s">
						<div class="btn">
							<div class="tab">
								<div class="tab_cell">
									<div class="btn_l"></div>
									<div class="btn_r"></div>
								</div>
							</div>
						</div>
						<div class="solution_list">
							<ul class="f-cb">
								<li>
									<a href="<?php echo site_url('hwliving/solution_detail'); ?>">
										<div class="pic">
											<img src="<?php echo static_file('web/img/hj1.jpg')?>" >
										</div>
										<div class="txt">居民住宅热水系统解决方案</div>
									</a>
								</li>
								<li>
									<a href="<?php echo site_url('hwliving/solution_detail'); ?>">
										<div class="pic">
											<img src="<?php echo static_file('web/img/hj2.jpg')?>" >
										</div>
										<div class="txt">别墅热水系统解决方案</div>
									</a>
								</li>
								<li>
									<a href="<?php echo site_url('hwliving/solution_detail'); ?>">
										<div class="pic">
											<img src="<?php echo static_file('web/img/hj3.jpg')?>" >
										</div>
										<div class="txt">高层小区住宅热水解决方案</div>
									</a>
								</li>
								<li>
									<a href="<?php echo site_url('hwliving/solution_detail'); ?>">
										<div class="pic">
											<img src="<?php echo static_file('web/img/hj1.jpg')?>" >
										</div>
										<div class="txt">泳池热水解决方案</div>
									</a>
								</li>
								<li>
									<a href="<?php echo site_url('hwliving/solution_detail'); ?>">
										<div class="pic">
											<img src="<?php echo static_file('web/img/hj1.jpg')?>" >
										</div>
										<div class="txt">居民住宅热水系统解决方案</div>
									</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="solution_swiper wow fadeInUp" data-wow-delay="0.4s">
						<div class="swiper-container">
							<div class="swiper-wrapper">
								<div class="swiper-slide">
									<a href="<?php echo site_url('hwliving/solution_detail'); ?>">
										<div class="pic">
											<img src="<?php echo static_file('web/img/hj1.jpg')?>" >
										</div>
										<div class="txt">别墅热水系统解决方案</div>
									</a>
								</div>
								<div class="swiper-slide">
									<a href="<?php echo site_url('hwliving/solution_detail'); ?>">
										<div class="pic">
											<img src="<?php echo static_file('web/img/hj2.jpg')?>" >
										</div>
										<div class="txt">别墅热水系统解决方案</div>
									</a>
								</div>
								<div class="swiper-slide">
									<a href="<?php echo site_url('hwliving/solution_detail'); ?>">
										<div class="pic">
											<img src="<?php echo static_file('web/img/hj3.jpg')?>" >
										</div>
										<div class="txt">别墅热水系统解决方案</div>
									</a>
								</div>
								<div class="swiper-slide">
									<a href="<?php echo site_url('hwliving/solution_detail'); ?>">
										<div class="pic">
											<img src="<?php echo static_file('web/img/hj3.jpg')?>" >
										</div>
										<div class="txt">别墅热水系统解决方案</div>
									</a>
								</div>
							</div>
						</div>
						<div class="swiper_btn">
							<div class="swiper_btnl"></div>
							<div class="swiper_btnr"></div>
						</div>
					</div>
					<a class="read_more wow fadeInUp" data-wow-delay="0.6s" href="<?php echo site_url('solution/plan'); ?>">
						<span class="txt">更多方案</span>
						<img src="<?php echo static_file('web/img/j.png')?>" alt="">
					</a>
				</div>
			</div>

			<div class="pro_list" style="background:url(<?php echo static_file('web/img/hot_bg.jpg')?>) no-repeat center center;background-size:cover;">
				<div class="text_box w1440">
					<div class="title wow fadeInUp">
						<div class="cn">五金卫浴</div>
						<div class="en">Hardware bathroom</div>
					</div>
					<div class="ds wow fadeInUp" data-wow-delay="0.2s">	
						我们用高科技、高品质、人性化的产品在满足您热水需求的同时，为您提供更加环保、智能、舒适的品位生活。
					</div>

					<div class="icon_list">
						<ul>
							<li class="wow fadeInRight" data-wow-delay="0.3s">
								<a href="<?php echo site_url('hwliving/list'); ?>">
									<div class="ico">
										<img src="<?php echo static_file('web/img/hot_icon1.png')?>" alt="">
									</div>
									<div class="txt">浴室柜</div>
								</a>
							</li>
							<li class="wow fadeInRight" data-wow-delay="0.5s">
								<a href="<?php echo site_url('hwliving/list'); ?>">
									<div class="ico">
										<img src="<?php echo static_file('web/img/hot_icon2.png')?>" alt="">
									</div>
									<div class="txt">花洒</div>
								</a>
							</li>

							<li class="wow fadeInRight" data-wow-delay="0.7s">
								<a href="<?php echo site_url('hwliving/list'); ?>">
									<div class="ico">
										<img src="<?php echo static_file('web/img/hot_icon3.png')?>" alt="">
									</div>
									<div class="txt">马桶</div>
								</a>
							</li>
							<li class="wow fadeInRight" data-wow-delay="0.9s">
								<a href="<?php echo site_url('hwliving/list'); ?>">
									<div class="ico">	
										<img src="<?php echo static_file('web/img/hot_icon4.png')?>" alt="">
									</div>
									<div class="txt">浴霸</div>
								</a>
							</li>
							<li class="wow fadeInRight" data-wow-delay="1.1s">
								<a href="<?php echo site_url('hwliving/list'); ?>">
									<div class="ico">
										<img src="<?php echo static_file('web/img/hot_icon5.png')?>" alt="">
									</div>
									<div class="txt">淋浴房</div>
								</a>
							</li>
							<li class="wow fadeInRight" data-wow-delay="1.3s">
								<a href="<?php echo site_url('hwliving/list'); ?>">
									<div class="ico">
										<img src="<?php echo static_file('web/img/hot_icon6.png')?>" alt="">
									</div>
									<div class="txt">五金龙头</div>
								</a>
							</li>
							<li class="wow fadeInRight" data-wow-delay="1.5s">
								<a href="<?php echo site_url('hwliving/list'); ?>">
									<div class="ico">
										<img src="<?php echo static_file('web/img/hot_icon7.png')?>" alt="">
									</div>
									<div class="txt">厨房水槽</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</section>
    	<?php include_once VIEWS.'inc/footer.php'; ?>
	</div>
	<script>
		$(function(){
			$('header .bocweb-nav ul li').eq(1).addClass('active');
			$(".flexslider").flexslider({
				animation: "fade",
				animationLoop: true,
				slideshow: true,
				slideshowSpeed: 5000,
				touch:true,
				pauseOnHover:true,
			});


			var ww=$(window).width()-($(window).width()-$('.solution_box').width())/2;
			$('.solution_list').width(ww);
			$('.solution_list ul li').width(ww*0.2787);
			$('.solution_list ul li').css('margin-right',ww*0.0161);
			var oliWidth=ww*(0.2787+0.0161);
			var len=$('.solution_list ul li').length;
			$('.solution_list ul').width(len*oliWidth+2);

			$('.btn .btn_l').click(function(){
				$('.solution_list ul').stop(true,true).animate({
					'left':-oliWidth
				},function(){
					$('.solution_list ul li').eq(0).appendTo($('.solution_list ul'));
					$('.solution_list ul').css('left',0)
				})
			})

			$('.btn .btn_r').click(function(){
				$('.solution_list ul li:last').prependTo($('.solution_list ul'));
				$('.solution_list ul').css('left',-oliWidth);
				$('.solution_list ul').stop(true,false).animate({
					'left':0
				})
			})




			var mySwiper = new Swiper ('.solution_swiper .swiper-container', {
			    nextButton: '.solution_swiper .swiper_btnr',
			    prevButton: '.solution_swiper .swiper_btnl',
			    slidesPerView : 3,
				spaceBetween : 20,
				breakpoints: { 
				    750: {
				      slidesPerView:2,
				      spaceBetween: 20
				    },
			    	 500: {
				      slidesPerView:1,
				      spaceBetween: 20
				    }
				    
				 }
			})

			$('.solution_list ul li .pic').height(Math.floor($('.solution_list ul li .pic').width()*(260/466)));
			$('.solution_swiper .swiper-slide .pic').height(Math.floor($('.solution_swiper .swiper-slide .pic').width()*(260/466)));

			$(window).resize(function(){
				ww=$(window).width()-($(window).width()-$('.solution_box').width())/2;
				$('.solution_list').width(ww);
				$('.solution_list ul li').width(ww*0.2787);
				$('.solution_list ul li').css('margin-right',ww*0.0161);
				oliWidth=ww*(0.2787+0.0161);
				len=$('.solution_list ul li').length;
				$('.solution_list ul').width(len*oliWidth+2);


				$('.solution_list ul li .pic').height(Math.floor($('.solution_list ul li .pic').width()*(260/466)));
				$('.solution_swiper .swiper-slide .pic').height(Math.floor($('.solution_swiper .swiper-slide .pic').width()*(260/466)));
			})
		})
	</script>
</body>
</html>

